<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select  v-if="isSelectShop" v-model="listQuery.shopId" class="filter-item" :placeholder="$t('请选择门店')">
        <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
      </el-select>

      <el-date-picker v-model="listQuery.startTime" type="date" class="filter-item" :disabled="!isSelectTime" :editable="false" :clearable="false" :placeholder="$t('Start_time')"></el-date-picker>

      <el-date-picker v-model="listQuery.endTime" type="date" class="filter-item" :disabled="!isSelectTime" :editable="false" :clearable="false" :placeholder="$t('End_time')"></el-date-picker>

      <el-input v-model="listQuery.userName" clearable class="filter-item" style="width: 200px;" :placeholder="$t('Member_account')"/>

      <el-input v-model="listQuery.refundSn" clearable class="filter-item" style="width: 200px;" :placeholder="$t('退款编号')"/>

      <el-input v-model="listQuery.orderSn" clearable class="filter-item" style="width: 200px;" :placeholder="$t('Order_ID')"/>

      <el-button class="filter-item" type="info" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
    </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"/>
      <span class="font-small">{{$t('Summary')}}</span>
    </div>

    <div class="table-layout">
      <el-row>
        <el-col :span="4" class="table-cell-title">{{$t('店铺')}}<i class="el-icon-s-home"></i></el-col>
        <el-col :span="4" class="table-cell-title">{{$t('退款数量')}}<i class="el-icon-s-release"></i></el-col>
        <el-col :span="4" class="table-cell-title">{{$t('退款总额')}}</el-col>
        <el-col :span="4" class="table-cell-title">{{$t('商品总额')}}</el-col>
        <el-col :span="4" class="table-cell-title">{{$t('税费')}}</el-col>
        <el-col :span="4" class="table-cell-title">{{$t('税费详情')}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell">{{refundStat.shopName}}</el-col>
        <el-col :span="4" class="table-cell">{{refundStat.orderNum}}</el-col>
        <el-col :span="4" class="table-cell">{{refundStat.totalAmount | floorTwoDecimal}}</el-col>
        <el-col :span="4" class="table-cell">{{refundStat.goodsAmount | floorTwoDecimal}}</el-col>
        <el-col :span="4" class="table-cell">{{refundStat.taxAmount | floorTwoDecimal}}</el-col>
        <el-col :span="4" class="table-cell">
          <el-tag  effect="plain1" type="info" v-for="tax in refundStat.taxDetailLs" :key="tax.code">
            {{tax.code}}：{{tax.totalAmount | floorTwoDecimal}}
          </el-tag>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"/>
      <span class="font-small">{{$t('Details')}}</span>
    </div>
    <p></p>
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>
      <el-table-column align="center" :label="$t('退款编号')" prop="refundSn"/>
      <el-table-column align="center" :label="$t('Order_ID')" prop="orderSn"/>
      <el-table-column align="center" :label="$t('Submission_time')" prop="addTime"/>
      <el-table-column align="center" :label="$t('Member_account')" prop="userName"/>
      <el-table-column align="center" :label="$t('Products')" prop="goodsNum"/>
      <el-table-column align="center" :label="$t('退款总额')" prop="totalAmount">
        <template slot-scope="scope">
          {{scope.row.totalAmount | floorTwoDecimal}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('商品金额')" prop="goodsAmount">
        <template slot-scope="scope">
          {{scope.row.goodsAmount | floorTwoDecimal}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('税费')" prop="taxAmount">
        <template slot-scope="scope">
          {{scope.row.taxAmount | floorTwoDecimal}}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('税费详情')">
        <template slot-scope="scope">
          <div v-for="tax in scope.row.taxDetailLs" :key="tax.code">
            {{tax.code}}：{{tax.totalAmount | floorTwoDecimal}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('退款方式')" prop="refundType">
        <template slot-scope="scope">
          <el-tag type="info" effect="plain1">{{ payTypeFilter(scope.row.refundType)  }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('操作员')" prop="operationName"/>
      <el-table-column align="center" :label="$t('订单所属门店')" prop="orderShopName"/>
      <el-table-column align="center" :label="$t('Operate')" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button icon="el-icon-view" type="info" plain1 size="mini" @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { orderShopRefundTotalStatistics, orderShopRefundList } from '@/api/order'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import checkPermission from '@/utils/permission' // 权限判断函数
import { allForPerm } from '@/api/shop'
import store from '@/store'

export default {
  name: 'orderRefund',
  components: { Pagination },
  filters: {

  },
  data() {
    const payTypeMap = {
      1: this.$t('现金支付'),
      2: this.$t('礼物卡支付'),
      3: this.$t('PayPal支付'),
      4: this.$t('余额支付'),
      5: this.$t('Clover支付'),
      6: this.$t('积分支付')
    }

    return {
      // 当前店铺
      shop: store.state.user.shop,
      payTypeMap,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'desc',
        shopId: undefined,
        userName: undefined,
        refundSn: undefined,
        orderSn: undefined,
        refundShopId: undefined,
        refundType: undefined,
        startTime: undefined,
        endTime: undefined
      },
      refundStat: {

      },
      // 是否选择门店
      isSelectShop: true,
      // 是否选择时间
      isSelectTime: true,
      shops: []
    }
  },
  created() {
    this.listQuery.startTime = this.getFullDate(new Date().setDate(1)) //当月第一天
    this.listQuery.endTime = this.getFullDate(new Date()) //当天

    // 店铺打开
    if (this.shop) {
      this.isSelectShop = false
      this.listQuery.shopId = this.shop.id
    }

    // 传递店铺id
    const shopId = this.$route.query.shopId
    if (shopId) {
      this.isSelectShop = false
      this.listQuery.shopId = shopId

      this.isSelectTime = false
      this.listQuery.startTime = this.$route.query.startTime
      this.listQuery.endTime = this.$route.query.endTime
    }

    allForPerm().then(response=>{
      this.shops = response.data.data.list

      // 选择第一个
      if (this.isSelectShop) {
        this.listQuery.shopId = this.shops[0].id
      }

      this.getList()
    })
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true

      // 概况
      orderShopRefundTotalStatistics(this.listQuery).then(response => {
        this.refundStat = response.data.data
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })

      // 详情
      orderShopRefundList(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    payTypeFilter(type){
      return this.payTypeMap[type]
    },
    handleDetail (row) {
      this.$router.push({ path: '/order/refund_details', query: { id: row.id }})
    },
    getFullDate(targetDate) {
      var D, y, m, d;
      if (targetDate) {
          D = new Date(targetDate);
          y = D.getFullYear();
          m = D.getMonth() + 1;
          d = D.getDate();
      } else {
          y = fullYear;
          m = month;
          d = date;
      }
      m = m > 9 ? m : '0' + m;
      d = d > 9 ? d : '0' + d;
      return y + '-' + m + '-' + d;
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    }
  }
}
</script>

<style scoped>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
